<template>
	<view class="content">
		<view class="info">
			<text class="word">近期精选</text>
		</view>
		<view class="images">
			<u-image class="image" :radius="10" :lazyLoad="true" v-for="(item,index) in works" :key="index"
				:src="item.path" bgColor="#ccc" :lazy-load="true" width="238rpx" height="400rpx"
				@click="toDetail(item.id)">
				<template v-slot:loading>
					<u-loading-icon mode="circle"></u-loading-icon>
				</template>
			</u-image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hot",
		props: ["works"],
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/works/show?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.info {
		text-align: center;

		.word {
			font-size: 28rpx;
			font-weight: 600;
		}
	}

	.images {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.image {
			margin-top: 8rpx;
		}
	}
</style>
